<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>

<body>
    <div id="app">
        <p v-hello>全局指令hello</p>
        <!-- <p v-hello="'red'">全局指令hello</p>
        <p v-hello=" 'blue' ">全局指令hello</p> -->
        <p v-hello:border=" '1px solid red' ">全局指令hello</p>
        <!-- <p v-hello:border=" '1px solid blue' ">全局指令hello</p> -->
        <!-- <p v-hello:border="'1px solid blue'">{{msg}}</p> -->
        <p v-hello:border.not="'1px solid blue'">{{msg}}</p>
        <input type="value" v-model="msg">
        <p v-hello:background-color="'#cccccc'">全局指令hello</p>
        <p v-hello:backgroundColor="'#cccccc'">全局指令hello</p>
        <hr>
        <p v-if="flag" v-my-dir>指令生命周期:{{msg}}</p>
        <input type="button" value="修改flag" @click="flag=!flag">
        <hr>
        <p v-dir-a>局部指令a</p>
        <p v-dir-b>局部指令b</p>

    </div>
</body>
<script>
    // 全局定义
    // v-指令名：参数.修饰符=取值
    // +参数：用于限制指令的功能
    // +修饰符：用于控制指令执行时机
    // +取值：用于提供指令定义值
    Vue.directive("hello", function (el, binding) {
        // console.log("hello指令",el);
        console.log(binding);
        let attr = "color";
        //当msg变量改变时，dom会重新渲染，是异步的
        Vue.nextTick(function () {
            if (binding.modifiers.not && el.textContent == "") {
                return;
            }
            if (binding.arg) {
                attr = binding.arg;
            }
            if (binding.value) {
                el.style[attr] = binding.value;
            }
        });
    });

    Vue.directive('my-dir',{
    // Vue.directive('myDir',{
        bind(el,binding){
            console.log("指令第一次完成 虚拟dom和该指令绑定关联时执行-只会执行一次");
            console.log(el,binding);
        },
        inserted(el,binding){
            console.log("被绑定的虚拟DOM 写入页面是执行-只会执行一次");
            console.log(el,binding);
        },
        update(el,binding,newVnode,oldVnode) {
            console.log("被绑定的DOM节点发生变化时 进行执行--重复执行");
            console.log(el,binding,newVnode,oldVnode);
        },
        componentUpated(el,binding){
            console.log("被绑定的DOM节点和其子节点全部更新完成 进行执行--重复执行");
            console.log(el,binding);
        },
        unbind(){
            console.log("指定和元素被销毁时，执行的方法");
        }
    })
    new Vue({
        el: "#app",
        data: {
            msg: "",
            flag:true
        },
        // 2局部定义
        directives:{
            dirA:function(el,binding){
                console.log("局部的dirA",el,binding);
            },
            "dir-b":{
                bind(){
                    console.log("dir-b:bind");
                },
                update(){
                    console.log("dir-b:update");
                }
            }
        }
    });
</script>

</html>